<template>
    <div class="process-tool-container">
<!--        <span @click="saveXml">保存</span>-->
<!--        <span @click="saveBPMN">导出</span>-->
<!--        <span @click="saveSVG">导出为图片</span>-->
        <div class="undo-redo">
            <img @click="undo" class="img undo" src="~@/assets/process/redo.png" alt="">
            <el-divider direction="vertical"></el-divider>
            <img @click="redo" class="img" src="~@/assets/process/redo.png" alt="">
        </div>
<!--        <div class="item" @click="alignElements('middle')">-->
<!--            <img class="img" src="~@/assets/process/middle.png" alt="">-->
<!--            <span>水平对齐</span>-->
<!--        </div>-->
<!--        <div class="item" @click="alignElements('center')">-->
<!--            <img class="img" src="~@/assets/process/center.png" alt="">-->
<!--            <span>垂直对齐</span>-->
<!--        </div>-->
<!--        <div class="item" @click="distributeElements('horizontal')">-->
<!--            <img class="img" src="~@/assets/process/horizontal.png" alt="">-->
<!--            <span>水平等距</span>-->
<!--        </div>-->
<!--        <div class="item" @click="distributeElements('vertical')">-->
<!--            <img class="img" src="~@/assets/process/vertical.png" alt="">-->
<!--            <span>垂直等距</span>-->
<!--        </div>-->
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component
export default class FlowChart extends Vue {
    @Prop({ default: {} }) private bpmnModeler!: object
    @Prop({ default: "" }) private xml!: string
    @Prop({ default: [] }) private elementSelector!: []
    @Prop({ default: 0 }) private scale!: number

    async saveXml() {
        const res = await (this.bpmnModeler as any).saveXML({ format: true });
        console.log(res.xml);
    }

    async saveBPMN() {
        const result = await (this.bpmnModeler as any).saveXML({ format: true });
        const { xml } = result;

        const xmlBlob = new Blob([xml], {
            type: 'application/bpmn20-xml;charset=UTF-8,'
        });

        const downloadLink = document.createElement('a');
        downloadLink.download = `bpmn-${+new Date()}.bpmn`;
        downloadLink.innerHTML = 'Get BPMN SVG';
        downloadLink.href = window.URL.createObjectURL(xmlBlob);
        downloadLink.onclick = function(event: any) {
            document.body.removeChild(event.target);
        };
        downloadLink.style.visibility = 'hidden';
        document.body.appendChild(downloadLink);
        downloadLink.click();
    }

    redo() {
        (this.bpmnModeler as any).get('commandStack').redo();
    }

    undo() {
        (this.bpmnModeler as any).get('commandStack').undo();
    }

    // 对齐方式
    alignElements(position: any = 'center') {
        const alignElements = (this.bpmnModeler as any).get('alignElements');
        alignElements.trigger(this.elementSelector, position);
    }

    // 水平垂直等距
    distributeElements(axis: any) {
        const alignElements = (this.bpmnModeler as any).get('distributeElements');
        alignElements.trigger(this.elementSelector, axis);
    }

    async saveSVG() {
        const result = await (this.bpmnModeler as any).saveSVG();
        const { svg } = result;

        const svgBlob = new Blob([svg], {
            type: 'image/svg+xml'
        });

        const downloadLink = document.createElement('a');
        downloadLink.download = `bpmn-${+new Date()}.SVG`;
        downloadLink.innerHTML = 'Get BPMN SVG';
        downloadLink.href = window.URL.createObjectURL(svgBlob);
        downloadLink.onclick = function(event: any) {
            document.body.removeChild(event.target);
        };
        downloadLink.style.visibility = 'hidden';
        document.body.appendChild(downloadLink);
        downloadLink.click();
    }
}
</script>

<style lang="scss" scoped>
.process-tool-container {
    user-select: none;
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    .item {
        padding: 6px 10px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        background: #FFFFFF;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        margin-left: 10px;
        cursor: pointer;
        .img {
            display: inline-block;
            width: 17px;
            height: 17px;
        }
        span {
            margin-left: 10px;
            padding-left: 10px;
            border-left: 1px solid #9DA1A4;
            line-height: 18px;
            font-size: 16px;
        }
    }
    .undo-redo {
        background: #FFFFFF;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        height: 30px;
        padding: 0 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        .img {
            display: inline-block;
            width: 17px;
            height: 17px;
            cursor: pointer;
        }
        .undo.img {
            transform: scaleX(-1);
        }
        /deep/.el-divider {
            margin: 0 10px;
            background: #9DA1A4;
        }
    }
}
</style>
